var home = new Vue({
	el: '#home',
	data: {
		sleepChart: null,
		sleep: [{
				name: 'sleep',
				type: '深睡',
				percent: 0,
				radius: 0
			}, {
				name: 'sleep',
				type: '浅睡',
				percent: 0.4,
				radius: [ 4, 0, 0, 4 ]
			}, {
				name: 'sleep',
				type: 'REM',
				percent: 4,
				radius: 0
			}, {
				name: 'sleep',
				type: '小睡',
				percent: 0.1,
				radius: [ 0, 4, 4, 0 ]
			}],
		heart: [{
			  time: '2016-08-08 00:00:00',
			  tem: 10
			}, {
			  time: '2016-08-08 00:10:00',
			  tem: 22
			}, {
			  time: '2016-08-08 00:30:00',
			  tem: 20
			}, {
			  time: '2016-08-09 00:35:00',
			  tem: 26
			}, {
			  time: '2016-08-09 01:00:00',
			  tem: 20
			}, {
			  time: '2016-08-09 01:20:00',
			  tem: 26
			}, {
			  time: '2016-08-10 01:40:00',
			  tem: 28
			}, {
			  time: '2016-08-10 02:00:00',
			  tem: 20
			}, {
			  time: '2016-08-10 02:20:00',
			  tem: 18
			}],
	},
	mounted() {
		this.initMainChart()
		this.initSleepChart()
		this.initHeartChart()
	},
	methods: {
		initMainChart() {
			const data = [{
				name: 'activity1',
				percent: 2370,
				color: '#78D668',
				bgColor: '#BBEAB3'
			}, {
				name: 'activity2',
				percent: 80,
				color: '#FF886F',
				bgColor: '#FFC3B7'
			}, {
				name: 'activity3',
				percent: 65,
				color: '#7299FF',
				bgColor: '#B8CCFF'
			}];

			// 创建chart
			const chart = new F2.Chart({
				id: 'container',
				padding: 0,
				pixelRatio: window.devicePixelRatio
			});

			chart.source(data, {
				percent: {
					max: 100
				}
			});
			chart.legend(false);
			chart.axis(false);
			chart.coord('polar', {
				transposed: true,
				innerRadius: 0.5,
				radius: 0.95
			});
			// 将数据映射到上面注册的Shape——interval，并绑定动画
			chart.interval()
				.position('name*percent')
				.color('color', function(val) {
					return val;
				})
				.shape('tick')
				.size(12)
			// 使用guide绘制辅助元素，添加背景和icon
			data.forEach(function(obj) {
				chart.guide().arc({
					start: [obj.name, 0],
					end: [obj.name, 99.98],
					top: false,
					style: {
						lineWidth: 12,
						stroke: obj.bgColor
					}
				});
				chart.guide().html({
					position: [obj.name, 0],
					html: `<div style="width: 12px;height: 12px;background: ${obj.color};border-radius: 50%;border: 3px solid #FFFFFF;"></div>`
				});
			});
			chart.render();
		},
		initSleepChart() {
			const chart = new F2.Chart({
				id: 'sleepChart',
				pixelRatio: window.devicePixelRatio
			});
			chart.source([], {
				percent: {
					min: 0
				}
			});
			chart.coord({
				transposed: true
			});
			chart.axis(false);
			chart.tooltip({
				custom: true,
				showItemMarker: false,
				showTooltipMarker: false,
			});
			chart.legend(false)
			chart.interval()
				.position('name*percent')
				.color('type')
				.adjust('stack')
				.style("radius", {
					radius: function radius(val) {
						return val;
					}
				})
			chart.render();
			chart.changeData(this.sleep);
		},
		initHeartChart(){
			const chart = new F2.Chart({
			  id: 'heartChart',
			  pixelRatio: window.devicePixelRatio
			});
			
			const defs = {
			  time: {
			    type: 'timeCat',
			    mask: 'MM/DD',
			    tickCount: 3,
			    range: [ 0, 1 ]
			  },
			  tem: {
			    tickCount: 5,
			    min: 0,
			    alias: '日均温度'
			  }
			};
			chart.source([], defs);
			chart.axis(false);
			chart.tooltip({
			  custom: true,
			  showCrosshairs: false
			});
			chart.line().position('time*tem').shape('smooth').size(6).color('#FF5D47');
			chart.render();
			chart.changeData(this.heart);
			
		}
	}
})